<template>
  <view class="page">
    <!-- 加载中 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 详情内容 -->
    <view v-else-if="feedback" class="content">
      <!-- 反馈信息 -->
      <view class="section">
        <view class="section-header">
          <view class="type-badge" :class="'type-' + feedback.type">
            {{ (typeMap && typeMap[feedback.type]) || '其他' }}
          </view>
          <view class="status-badge" :class="'status-' + feedback.status">
            {{ (statusMap && statusMap[feedback.status]) || '未知' }}
          </view>
        </view>
        <view class="feedback-no">反馈编号：{{ feedback.feedbackNo }}</view>
        <view class="feedback-time">提交时间：{{ feedback.createTime }}</view>
      </view>

      <!-- 反馈内容 -->
      <view class="section">
        <view class="section-title">反馈内容</view>
        <view class="feedback-content">{{ feedback.content }}</view>
        <view v-if="feedback && feedback.images" class="images">
          <image
            v-for="(img, index) in parseImages(feedback.images)"
            :key="index"
            :src="img"
            mode="aspectFill"
            class="image"
            @click="previewImage(img)"
          />
        </view>
      </view>

      <!-- 联系方式 -->
      <view v-if="feedback.contact" class="section">
        <view class="section-title">联系方式</view>
        <view class="contact-info">{{ feedback.contact }}</view>
      </view>

      <!-- 回复列表 -->
      <view class="section" v-if="replies.length > 0">
        <view class="title">回复记录（{{ replies.length }}）</view>
        <view class="reply" v-for="(r, i) in replies" :key="i">
          <view class="reply-header">
            <text class="r-type" :class="'t-' + r.replyType">{{ r.replyType === 1 ? '平台回复' : '用户追加' }}</text>
            <text class="r-time">{{ r.createTime }}</text>
          </view>
          <view class="r-content">{{ r.content }}</view>
          <view class="images" v-if="r.images">
            <image
              v-for="(img, idx) in parseImages(r.images)"
              :key="idx"
              :src="img"
              mode="aspectFill"
              class="image"
              @click="preview(img, idx, parseImages(r.images))"
            />
          </view>
        </view>
      </view>

      <!-- 追加反馈 -->
      <view class="section">
        <view class="title">追加反馈</view>
        <view class="textarea-wrapper">
          <textarea
            v-model="appendForm.content"
            class="textarea"
            placeholder="请输入追加内容（最多200字）"
            :maxlength="200"
          />
          <MultiImageUploader
            :images.sync="appendForm.images"
            title="上传图片"
            tip="最多9张"
            :maxCount="9"
            :uploadUrl="uploadUrl"
            module="feedback"
          />
        </view>
        <view class="char">{{ appendForm.content.length }}/200</view>
        <button class="submit" :loading="appending" @click="appendFeedback">提交追加</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getFeedbackDetail, getFeedbackReplies, appendFeedback } from '@/api/feedback'
import MultiImageUploader from '@/components/MultiImageUploader.vue'

export default {
  components: { MultiImageUploader },
  data() {
    return {
      feedback: null,
      replies: [],
      loading: true,
      appending: false,
      appendForm: {
        content: '',
        images: []
      },
      uploadUrl: process.env.NODE_ENV === 'development'
        ? 'http://localhost:8080/api/file/upload'
        : 'https://xindian66.xyz/api/file/upload',
      typeMap: {
        1: '商品问题',
        2: '配送问题',
        3: '服务问题',
        4: '系统问题',
        5: '功能建议',
        6: '其他'
      },
      statusMap: {
        0: '待处理',
        1: '待处理',
        2: '已处理',
        3: '已关闭'
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadDetail(options.id)
    }
  },
  onShow() {
    // 返回页面时刷新回复列表（若已加载过详情）
    if (this.feedback && this.feedback.id) {
      this.refreshReplies(this.feedback.id)
    }
  },
  methods: {
    async loadDetail(id) {
      try {
        const detailData = await getFeedbackDetail(id)
        //console.log('[feedback/detail] detail:', detailData)
        this.feedback = detailData || null
        await this.refreshReplies(id)
      } catch (error) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    async refreshReplies(id) {
      try {
        const rs = await getFeedbackReplies(id)
        this.replies = Array.isArray(rs) ? rs : []
      } catch (e) {
        this.replies = []
      }
    },
    parseImages(imagesStr) {
      if (!imagesStr) return []
      try { return JSON.parse(imagesStr) } catch { return [] }
    },
    previewImage(img) {
      uni.previewImage({
        urls: [img]
      })
    },
    preview(current, currentIndex, urls) {
      uni.previewImage({ current: currentIndex, urls })
    },
    getTypeName(type) {
      return this.typeMap[type] || '其他'
    },
    getStatusName(status) {
      return this.statusMap[status] || '未知'
    },
    async appendFeedback() {
      if (!this.appendForm.content.trim()) {
        uni.showToast({ title: '请输入追加内容', icon: 'none' })
        return
      }
      this.appending = true
      try {
        await appendFeedback(this.feedback.id, { content: this.appendForm.content, images: this.appendForm.images })
        uni.showToast({ title: '追加成功', icon: 'success' })
        this.appendForm.content = ''
        this.appendForm.images = []
        const rs = await getFeedbackReplies(this.feedback.id)
        this.replies = Array.isArray(rs) ? rs : []
      } catch (e) {
        // 已有统一提示
      } finally {
        this.appending = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 20rpx;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 28rpx;
  color: #999;
}

.content {
  padding: 20rpx;
}

.section {
  background: white;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.type-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
  font-weight: 500;

  &.type-1 {
    background: #fff3cd;
    color: #856404;
  }

  &.type-2 {
    background: #d1ecf1;
    color: #0c5460;
  }

  &.type-3 {
    background: #f8d7da;
    color: #721c24;
  }

  &.type-4 {
    background: #d6d8db;
    color: #383d41;
  }

  &.type-5 {
    background: #d4edda;
    color: #155724;
  }

  &.type-6 {
    background: #e2e3e5;
    color: #383d41;
  }
}

.status-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
  font-weight: 500;

  &.status-0 {
    background: #fff3cd;
    color: #856404;
  }

  &.status-1 {
    background: #cfe2ff;
    color: #084298;
  }

  &.status-2 {
    background: #d1e7dd;
    color: #0f5132;
  }

  &.status-3 {
    background: #e2e3e5;
    color: #383d41;
  }
}

.feedback-no,
.feedback-time {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
}

.title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.feedback-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12rpx;
  white-space: pre-wrap;
  word-break: break-all;
}

.contact-info {
  font-size: 28rpx;
  color: #333;
}

.images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
  margin-top: 12rpx;
}

.image {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
  background: #f0f0f0;
}

.reply-item {
  padding: 16rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.reply-type {
  display: inline-block;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-weight: 500;

  &.type-1 {
    background: #cfe2ff;
    color: #084298;
  }

  &.type-2 {
    background: #d1e7dd;
    color: #0f5132;
  }
}

.reply-time {
  font-size: 24rpx;
  color: #999;
}

.reply-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.textarea-wrapper {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #fafafa;
  overflow: hidden;
}

.textarea {
  width: 100%;
  padding: 12rpx 16rpx;
  border: none;
  font-size: 26rpx;
  color: #333;
  background: #fafafa;
  min-height: 100rpx;
  box-sizing: border-box;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  margin-bottom: 12rpx;
}

.button-group {
  display: flex;
  gap: 12rpx;
}

.btn-append {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx;
  font-size: 26rpx;
}

.reply {
  background: #f9f9f9;
  border-radius: 10rpx;
  padding: 12rpx;
  margin-bottom: 10rpx;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.r-type {
  &.t-1 {
    color: #084298;
  }
  &.t-2 {
    color: #0f5132;
  }
}

.r-time {
  font-size: 24rpx;
  color: #999;
}

.r-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.char {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin: 6rpx 0 10rpx;
}

.submit {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 14rpx;
  font-size: 28rpx;
}
</style>

